<template>
  <div>
    <el-dialog title="详细信息" :visible.sync="isshow" width="900px" @close="close">
      <div>
        <div v-html="questionMsg.title"></div>
        <div class="search_bar">
          <div class="search">
            <span style="width: 100px;line-height: 30px;font-weight: bold;">答案文本</span>
            <el-input
              v-model="searchForm.answerContent"
              placeholder="请输入要搜索的答案"
              class="searchbox"
            ></el-input>

            <el-button type="primary" class="searchbtn" @click="searchBytip"
            >搜索
            </el-button
            >
          </div>
          <div class="fifter">
            <el-checkbox
              v-model="searchForm.filterEmptyFlag"
              :true-label="1"
              :false-label="0"
              @change="searchBytip"
            >过滤空选项
            </el-checkbox
            >
          </div>
        </div>
        <div ref="printquestionMsg">
          <el-table :data="options" style="width: 100%; margin-top: 20px">
            <el-table-column
              type="index"
              label="序号"
              align="center"
            ></el-table-column>
            <!--            TODO:根据是否匿名判断如何显示-->
            <el-table-column
              prop="nickName"
              label="姓名"
              align="center"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.anonymousFlag ? scope.row.nickName.replace(/./g, '*') : scope.row.nickName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="submitTime"
              label="提交答卷时间"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="answerContent" label="答案文本" show-overflow-tooltip>
              <template slot-scope="scope">
                <div v-if="scope.row.answerContent!=null&&scope.row.answerContent.indexOf(']')!=-1"
                     class="answerText"
                >
                  <template v-for="e of JSON.parse(scope.row.answerContent)">
                    {{ e }}
                  </template>
                </div>
                <div v-else class="answerText">
                  {{ scope.row.answerContent }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="查看答卷">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="lookmsg(scope.row.surveyUserId, scope.$index)"
                >查看答卷
                </el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="searchForm.pageNum"
          :limit.sync="searchForm.pageSize"
          @pagination="getList"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="printquestionMsg">打印</el-button>
        <el-button type="primary" @click="loadSurvey">下载</el-button>
        <el-button type="primary" @click="close">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 详细信息弹框 -->
    <Answerbox ref="answerbox"></Answerbox>
  </div>
</template>

<script>
import { getAnswerlist, exportinput } from '@/api/questions/statistics'
import Answerbox from './answerMsg.vue'

export default {
  name: 'MixedStateAdminQuestionMsg',
  components: {
    Answerbox
  },
  data() {
    return {
      isshow: false,
      questionMsg: {
        title: '一条问题标题',
        options: []
      },
      searchForm: {
        id: '',
        filterEmptyFlag: 0,
        answerContent: '',
        idType: '',
        pageNum: 1,
        pageSize: 10,
        questionNo: ''
      },
      total: 0,
      options: []
    }
  },

  mounted() {
  },

  methods: {
    show(row, idType, index) {
      this.searchForm.id = row.id
      this.searchForm.idType = idType
      this.searchForm.questionNo = index
      this.questionMsg.title =
        row.optionName ||
        row.questionName.replace(/<p\b[^>]*>(.*?)<\/p>/gi, '$1')
      // 获取题目id查询题目回答详情
      this.getList()
      this.isshow = true
    },
    lookmsg(id, index) {
      this.$refs.answerbox.show(id, index)
    },
    getList() {
      // 使用获取后端数据
      getAnswerlist(this.searchForm).then((res) => {
        this.total = res.total
        //TODO: 给页面表格数据赋值
        this.options = res.rows
      })
    },
    searchBytip() {
      this.getList()
    },
    // 问卷详情打印
    printquestionMsg() {
      this.$html2canvas(this.$refs.printquestionMsg, {
        backgroundColor: 'white',
        useCORS: true,
        foreignObjectRendering: false,
        windowWidth: document.body.scrollWidth,
        windowHeight: document.body.scrollHeight
      }).then((canvas) => {
        const url = canvas.toDataURL()
        this.img = url
        this.$print({
          printable: url,
          type: 'image',
          documentTitle: '--',
          base64: 'true'
        })
      })
    },
    // 问卷填空下载
    // 问卷下载
    loadSurvey() {
      exportinput(this.searchForm).then((res) => {
        const blob = new Blob([res], { type: '' })
        let fileName = '问卷统计.xlsx'
        if ('download' in document.createElement('a')) {
          const link = document.createElement('a')
          link.download = fileName
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click()
          URL.revokeObjectURL(link.href)
          document.body.removeChild(link)
        } else {
          navigator.msSaveBlob(blob.fileName)
        }

      })
    },
    close() {
      this.isshow = false
      this.searchForm = {
        id: '',
        filterEmptyFlag: 0,
        answerContent: '',
        idType: '',
        pageNum: 1,
        pageSize: 10,
        questionNo: ''
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.search_bar {
  margin-top: 20px;
  background-color: #fafafa;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

.search {
  display: flex;
}

.searchbtn {
  height: 30px;
  line-height: 10px;
  margin-left: 20px;
}

.searchbox ::v-deep .el-input__inner {
  height: 30px;
}

.fifter {
  display: flex;
  align-items: center;

}

.answerText {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

</style>
